<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./download/font_3366928_u09i2suco8/iconfont.css"> -->
    <!-- <link rel="stylesheet" href="./css/分类页.css"> -->

</head>

<style>

*{
        margin: 0;
        padding: 0;

    }
    body{
        height: 800px;
    }
     .ull{
       
     
        margin-top: 10px;
        border:1px solid #ccc;
        
    }
    .ull div{
        display: flex;
        flex-wrap: wrap;
      
        box-sizing: border-box;
        
    }
    .ull li{
        list-style: none;
        line-height: 40px;
        font-size: 12px;

      

    }
    .ull h4{
        height: 40px;
        background-color:rgba(224, 204, 214, 0.6);
        color: #c36;
        font-size: 14px;
        padding-left: 30px;
        border-bottom: 1px solid #666;
    }
    h4:hover{
        font-size: 16px;
       

    }
    .ull p{
       
        width: 93px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        box-sizing: border-box;
    }
    div p:nth-of-type(4n){
        border-right: none;
    }



    /* ................................................................ */
    .he{
        height: 40px;
        background-color: blue;
        font-size: 20px;

        line-height: 40px;
        padding-left: 10px;
        color: azure;
  }
    input{
    outline: none;
    border: 1px solid #ccc;
    height: 30px;
    width: 260px;
    margin-top: 10px;
    margin-left: 12px;
    border-radius: 40px;
    padding-left: 10px;
    font-weight: 500;

    }
    .btn{
    width: 60px;
    outline: none;
    border-radius: 40px;
    border: 1px solid #ccc;
    background-color: #1d6dff;
    color: white;

    left: 224px;
    top: 50px;
    font-weight: 500;

    position: absolute;
    height: 32px;
    }


.btn1{
    height: 40px;
    width: 90%;
    margin-left: 18px;
    background-color:#ccc;
    outline: none;
    border: none;
    border-radius: 4px;
    position: relative;
    top:10px;


    
}
.pin{
    height: 40px;
    background-color: cornflowerblue;
    line-height: 40px;
    padding-left: 20px;
    color: white;
    position: relative;
    margin-top: 20px;

}

.bot{
    margin-top: 10px;
    height: 40px;
    /* background-color: wheat; */
    display: flex;
    text-align: center;
    line-height: 40px;
    color: #666;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    
}
.bot span:nth-of-type(1){
    width: 120px;
    height: 100%;
    /* background-color: aqua; */
    border-right: 1px solid #ccc;

}
.bot span:nth-of-type(2){
    width: 120px;
    height: 100%;
    /* background-color:rebeccapurple; */
    border-right: 1px solid #ccc;

}
.bot span:nth-of-type(3){
    flex-grow: 1;
    height: 100%;
    /* background-color: darkorange; */
}
.pp1{
    padding: 10px 10px;
    font-size: 15px;
    font-family: "宋体";
    margin-top: 6px;
    display: inline-block;

}
.pp2{
    padding: 0 110px;
    font-size: 15px;
    font-family: "宋体";

    display: inline-block;

}
.icon-shouye1{
    font-size: 14px!important;
    color: darkred;
}
</style>
<body>
    <div class="he">万峰智慧</div>
    <input placeholder="请输入您想比价的产品">
    <button class="btn">搜索</button>
    
 <ul class="ull">
  <!-- <li>
            <h4>家电</h4>
            <div class="divbox">
         
            </div>
        </li> -->

 
 </ul>

 <button class="btn1">更多优惠信息 >>></button>
 <div class="pin">品牌排行

    <i class="iconfont icon-youjiantou3"></i>
 </div>

 <div class="bot">
    <span>登入</span>
    <span>注册</span>
    <span>返回顶部</span>
 </div>

 <span class="pp1">手机app下载 万峰智慧商城手机版 -- 掌上比价平台</span>
 <span class="pp2">chast.vip.8081/.com</span>


 <script src="./js/jquery.min.js"></script>
 <script src="./js/封装函数.js"></script>

 <script>
    let arr=[]
    let ull=document.querySelector('.ull')
   const xhr=new XMLHttpRequest()
   
   
   
    xhr.open('get',"http://chst.vip:1234/api/getcategorytitle",false,)
    xhr.onload=function(){
        if(xhr.status===200){
            var res=JSON.parse(xhr.responseText)
            // console.log(res.result)
            var lis=''
            res.result.forEach(ele => {
             lis+=`
             <li brandtitleid='${ele.brandTitleId}'>
                <h4>${ele.title}</h4>
                <div class="divbox"></div>
             </li>

             `
          arr.push(ele.titleId)
           
        
            })
            ull.innerHTML=lis
         }
       
     }
       
        
            xhr.send(null)
            // console.log(arr)
            // console.log(arr[0])

    
    
   let divv=document.querySelectorAll('.ull li div')
          arr.forEach(function(item,index){
           const xhr1=new XMLHttpRequest()
           xhr1.open('get',`http://chst.vip:1234/api/getcategory?titleid=${item}`,false)
           xhr1.onload=function(){
            if(xhr1.status===200){
                let res2=JSON.parse(xhr1.responseText)
                console.log(res2)
                let ps=''
                res2.result.forEach(function(vc){
                    ps+=`
                    <p categoryid="${vc.categoryId}">${vc.category}</p>
                    `

                })
                divv[index].innerHTML=ps
         
            }
           }
           xhr1.send(null)
         })

        $(function(){
            $('.divbox').stop().slideUp(0);
      
            $('.ull li').click(function(){
            $(this).find('.divbox').stop().slideToggle().parent().siblings().find('.divbox').stop().slideUp()
        })
     })
     
     




     ull.onclick=function(ev){
    let e=ev||window.event

    let target=e.target||e.srcElement
    console.log(target.nodeName);

    if(target.nodeName==='LI'){
        localStorage.setItem('brandtitleId',target.getAttribute('brandtitleid'))
    }
    // location.href='./商品列表跳转1.html'
}

$('p').click(function(){
    // location.href='./商品列表跳转1.html'
    location.href='./品牌列表.html'

    localStorage.setItem('categoryid',$(this).getAttribute('categoryid'))

    
})

setInterval(function(){
    $('p').eq(random(0,200)).css('background',yanse())
    $('h4').eq(random(0,7)).css('color',yanse())

},20)












// ull.onclick=function(ev){
//     let e=ev||window.event

//     let target=e.target||e.srcElement
//     console.log(target.nodeName);

//     if(target.nodeName==='LI'){
//         localStorage.setItem('titleId',target.getAttribute('titleId'))
//     }
//     location.href='./商品列表跳转1.html'
// }

var ding=document.querySelector('.bot span:nth-of-type(3)')

ding.style.color='#c36'
ding.onclick=function(){
    document.documentElement.scrollTop=0
}


        
 </script>
</body>
</html>